<template>
  <div class="back-container">
    <div class="header">
      <div class="header-left">
        <div class="logo">
          <h1>盲盒商城</h1>
        </div>
      </div>

      <div class="header-right">
        <el-dropdown size="medium" @command="handleCommand">
          <div class="el-dropdown-link">
            <el-avatar :src="loginUser.avatar" />
            <div class="nickname">{{ loginUser.nickname }}</div>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item icon="el-icon-s-platform" command="front">
                前台首页
              </el-dropdown-item>
              <el-dropdown-item icon="el-icon-error" command="exit">
                退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <div class="content">
      <div class="nav">
        <el-menu default-active="/back/users" background-color="#324158" text-color="#fff" :router="true">
          <el-menu-item index="/back/users">
            <i class="el-icon-user-solid"></i>用户管理
          </el-menu-item>
          <el-menu-item index="/back/products">
            <i class="el-icon-s-data"></i>商品管理
          </el-menu-item>
          <el-menu-item index="/back/orders">
            <i class="el-icon-s-comment"></i>订单管理
          </el-menu-item>
        </el-menu>
      </div>
      <div class="main">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
import storage from '@/utils/storage'
export default {
  name: '',
  data() {
    return {
      loginUser: {},
    }
  },
  created() {
    this.loginUser = storage.getLoginUser()
  },
  methods: {
    handleCommand(command) {
      if (command === 'front') {
        setTimeout(() => {
          this.$router.push('/front/home')
        }, 100)
      } else if (command === 'exit') {
        sessionStorage.clear()

        setTimeout(() => {
          this.$router.push('/')
        }, 100)

        this.$message({
          message: '退出成功',
          type: 'success',
        })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
$theme-color: rgb(64, 158, 255);

.back-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;

  .header {
    display: flex;
    justify-content: space-between;
    height: 50px;
    width: 100%;
    background-color: rgb(36, 47, 65);

    &-left {
      .logo {
        margin: 0 40px;

        h1 {
          cursor: pointer;
          margin: 0;
          line-height: 50px;
          color: $theme-color;
        }
      }
    }

    &-right {
      margin: 0 20px;
      align-items: center;
      display: flex;

      .el-dropdown {
        align-items: center;

        .el-dropdown-link {
          display: flex;
          align-items: center;

          .nickname {
            margin-left: 10px;
            color: white;
          }
        }
      }
    }
  }

  .content {
    display: flex;
    flex: 1;

    .nav {
      height: 100%;
      width: 220px;
      background-color: #324158;

      .el-menu {
        border-style: none;
      }
    }

    .main {
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      padding: 20px;
    }
  }
}
</style>